iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0

使用語言

  • Kotlin

使用元件

  • ImageView
  • TextView
  • RecyclerView

Layout 準備

  • 一個主 layout 包含一個 RecyclerView
  • 一個 RecyclerView 子項目的 layout

Method


LayoutInflater

用來將 res/layout/ 下的 xml 佈局文件加載成 View

  1. 先實例化 LayoutInflater

    四種實例化方式:

  2. 將 layout 載入生成 View

    inflate (resource: Int, root: ViewGroup, attachToRoot: Boolean)

    val view = inflater.inflate(R.layout.image, viewGroup, fasle)
    
    • resource:想實例化成 View 的 layout
    • root:作為 Parent 設置 layout 布局位置
    • attachToRoot:是否要將上述 root 做為新生成 View 的 root

RecyclerView


Adapter

建立一個 class 繼承 RecyclerView.Adapter

class Adapter(val list: List<content>) : RecyclerView.Adapter<Adapter.ViewHolder>() {}
// 參數 list 為 Activity 傳入要綁定到 View 上的資料

Adapter 將負責 RecyclerView 中 View 的調用及呈現

Adapter 會創建多個 ViewHolder,個數會依畫面需求而不同(僅建立夠用的個數)
畫面滑動時,滑出畫面預備範圍外的 ViewHolder 將被暫存
進入畫面預備範圍內的新項目會以取用被暫存的 ViewHolder 綁定新資料的方式呈現

優點:ViewHolder 將被回收並重複使用,在滑動過程中不用一直重新建立 View

有三個必須 override 的 function

  • onCreatViewHolder

    創建 ViewHolder 供 RecyclerView 使用

    override fun onCreateViewHolder(viewGroup: ViewGroup, position: Int): Adapter.ViewHolder {
        val view = LayoutInflater.from(viewGroup.context).inflate(R.layout.image, viewGroup, false)
        return ViewHolder(view)
    }
    
    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView = itemView.imageView
        val textView = itemView.textView
    
        fun bind(content: content) {
            imageView.setImageResource(content.image)
            textView.setText(content.text)
        }
    }
    
    • 將子項目的 layout 實例化成 View,並做為 itemView 傳入 ViewHolder Class 建立 ViewHolder
    • itemView :即 RecyclerView 中每個子項目呈現的 View
    • bind:將在之後的 onBindViewHolder 被調用,用來綁定 itemView 與資料
  • onBindViewHolder

    綁定 ViewHolder 和資料

    override fun onBindViewHolder(holder: Adapter.ViewHolder, position: Int) {
        holder.bind(list[position])
    }
    

    在 ViewHolder 被使用的時候,調用 ViewHolder 中的 bind 方法綁定新資料

  • getItemCount

    提供 Adapter 資料的總筆數

    override fun getItemCount() = this.contentList.count()
    

完成 Adapter 後將 Adapter 指定給 RecyclerView 做使用

recyclerView.adapter = Adapter(list)  
//此 recyclerView 為 layout 中 RecyclerView 的 id

LayoutManager

負責子項目的排列方式

LayoutManager有三種:

指定 RecyclerView 的 LayoutManager

recyclerView.layoutManager = LinearLayoutManager(this)
//此 this 為 Activity (Context)

實作成果

(圖片來源:Android Studio Sample Data)

查看詳細 Code > GitHub

tags: RecyclerView Adapter LayoutManager LayoutInflater

上一篇
Android Kotlin 實作 Day 5 : WebView_Search(使用 WebView+Keyboard)
下一篇
Android Kotlin 實作 Day 7_MyLocation(上)(導入GoogleMap + API Key 取得及使用)
系列文
英國研究顯示,連續30天用Kotlin開發Android將有益於身心健康30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言